<template>
  <div>
    <div :class="bg" class="top">
      <h1>记事本</h1>
      <div class="top-icon">
        <i
          class="el-icon-s-fold"
          style="font-size: 30px"
          @click="show = true"
        ></i>
      </div>
    </div>

    <div class="search-container">
      <div class="left-container">
        <el-dropdown split-button>
          筛选类型
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="right-container">
          <el-input v-model="input" placeholder="筛选关键词">
          </el-input>
      </div>
    </div>

    <div class="tab-container">
         <el-table border :data="list" style="width: 100%">
            <el-table-column prop="list.length" label="#" width="40">
            </el-table-column>
            <el-table-column prop="list.title" label="所有事项" width="120">
            </el-table-column>
            <el-table-column prop="date" label="类型" width="70">
            </el-table-column>
            <el-table-column label="操作">
               <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
               </template>
            </el-table-column>
         </el-table>    
    </div>

    <van-popup v-model="show" position="left" :style="{width:'50%',height:'80%'}" class="popup-container">
      <ul>
        <li style="margin-top:10px">
          <van-button type="info">切换主题</van-button>
        </li>
        <li  style="margin-top:10px"><van-button type="info" @click="goHome">返回主页</van-button></li>
        <li style="margin-top:10px"><button @click="bg='pink'">粉色</button></li>
        <li style="margin-top:10px"><button @click="bg='blue'">蓝色</button></li>
        <li style="margin-top:10px"><button @click="bg='green'">绿色</button></li>
      </ul>
    </van-popup>

  </div>
</template>

<script>
export default {
  data() {
    return {
      bg: "blue",
      show:false,
    };
  },
  methods:{
      goHome(){
          this.$router.push("/")
      }  
    }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.tab-container{
    width:100%;
    height:70vh;
    /* background-color: lightsalmon; */
}
.top-icon {
  width: 20%;
  height: 100%;
  /* background-color: brown; */
  position: absolute;
  right: 0px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.search-container {
  width: 100%;
  height: 65px;
  background-color: lightcoral;
  display: inline-flex;
  justify-content: space-between;
}
.left-container {
  width: 35%;
  height: 100%;
  display:inline-flex;
  justify-content:center;
  align-items:center;
}
.right-container {
  width: 60%;
  height: 100%;
  /* background-color: lightgreen; */
  display:inline-flex;
  justify-content:center;
  align-items:center;
}
.top {
  position: relative;
  width: 100%;
  height: 64px;
  color: white;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.top.blue {
  background-color: rgb(53, 159, 247) !important;
}
.top.pink {
  background-color: pink !important;
}
.top.green {
  background-color: lightgreen !important;
}
.popup-container{
  /* background-color:rgba(0,0,0,0.3); */
  display: inline-flex;
  flex-wrap: wrap;
}
</style>